<template>
  <div>
    <el-card shadow="never">
      <h3>我的投票</h3>
    </el-card>
    <br>
    <el-card shadow="never">
      <data-table :table-data="tableData">
        <el-table-column
          label="唯一标识"
          align="center"
          fixed=""
          width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          align="center"
          fixed=""
          width="80"
          type="expand"
        >
          <template slot-scope="scope">
            <h4>参数总人数： {{ getJoinPerson(scope.row.itemList) }}人</h4>
            <el-table :data="scope.row.itemList">
              <el-table-column
                label="序号"
                align="center"
                fixed=""
                width="80"
              >
                <template slot-scope="props">
                  <span>{{ props.row.no }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="选项内容"
                align="center"
              >
                <template slot-scope="props">

                  <span>{{ props.row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="选择人数"
                align="center"
              >
                <template slot-scope="props">

                  <el-progress :text-inside="true" :stroke-width="16" :percentage="getPercent(scope.row.itemList, props.row.count)" />
                  <span>{{ props.row.count }}人</span>

                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="发起用户"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="投票标题"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="投票描述"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.desc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              :active-value="0"
              :inactive-value="1"
              active-text="投票开始"
              inactive-text="投票结束"
              @change="change(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0" size="mini" type="success">投票中</el-tag>
            <el-tag v-if="scope.row.state === 1" size="mini" type="danger">投票结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="#"
          align="center"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </data-table>
    </el-card>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import * as voteApi from '@/api/vote'
import { getUser } from '@/utils/auth'
export default {
  name: '',
  components: {
    DataTable
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      voteApi.list().then(resp => {
        this.tableData = resp.data
      })
    },
    // 得到选项的百分比
    getPercent(list, count) {
      const sum = list.reduce((pre, next) => {
        console.log(pre, next.count)
        return pre + next.count
      }, 0)
      const p = count / sum * 100
      if (sum === 0) {
        return 0
      }
      return parseFloat(p.toFixed(2))
    },
    change(row) {
      voteApi.update(row).then(resp => {
        this.getData()
        this.$notifySuccess('操作成功')
      })
    },
    delBtn(row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        voteApi.del(row.id).then(resp => {
          this.$notifySuccess('删除成功')
          this.getData()
        })
      }).catch(() => {
        this.$notifyError('取消删除')
      })
    },
    getJoinPerson(list) {
      const sum = list.reduce((prev, next) => {
        return prev + next.count
      }, 0)
      if (sum === 0) {
        return 0
      } else {
        return sum
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
</style>
